<template>
  <div class="lottery-nav">
    <div class="nav-card" 
      v-for="item in lotterys" 
      @click="selectLottery(item.path)"
      :key="item.id">
      <span class="icon box-shadow-lottery" :style="bg(item.bg)">
        <icon-svg :iconClass="item.icon"></icon-svg>
      </span>
      <p class="context">
        {{item.context}}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lotterys: [
        {
          id: 1,
          icon: '',
          context: '重庆时时彩',
          path: '/select-number/shishicai',
          icon: 'iconicon_chongqingshishi',
          bg: require('@/assets/imgs/caizhong_bj_01.svg')
        },
        {
          id: 2,
          icon: '',
          context: '北京赛车',
          path: '/select-number/bjracer',
          icon: 'iconicon_jisupk',
          bg: require('@/assets/imgs/caizhong_bj_02.svg')
        },
        {
          id: 3,
          icon: '',
          context: '新疆时时彩',
          path: '/select-number/xjssc',
          icon: 'iconicon_xinjiangshishic',
          bg: require('@/assets/imgs/caizhong_bj_07.svg')
        },
        {
          id: 4,
          icon: '',
          context: '幸运飞艇',
          path: '/select-number/xyft',
          icon: 'iconCZ_Icon_xingyunfeiti',
          bg: require('@/assets/imgs/caizhong_bj_02.svg')
        }
      ]
    }
  },
  methods: {
    selectLottery(path) {
      this.$router.push({path})
    },
    bg(bg) {
      return `background: url(${bg}) no-repeat center / cover`
    }
  }
}
</script>

<style lang="stylus" scoped>
  .lottery-nav
    height 100%
    display flex 
    align-items center
    justify-content space-between
    .nav-card
      text-align center 
      display flex 
      flex-direction column 
      justify-content center 
      align-items center 
      .icon 
        width 48px 
        height 48px
        font-size 42px
        border-radius 50%
        display flex 
        justify-content center
        align-items center
        margin-bottom 10px
        overflow hidden

</style>